<template>
	<view>
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header_slot flex justify-start align-center" @click="closePage()">
					<view class="action" style="margin-right: 20rpx;">
						<text class="cuIcon-back "></text>
					</view>
					<view class="content text-bold">
						我是商家
					</view>
				</view>
			</template>
		</headerSlot>
		<view class="cu-card case ">
			<view class="cu-item shadow ">
				<uni-section class="mb-10" :title="sellerName" type="line" titleFontSize='16px'></uni-section>

				<view class="me_tab flex justify-between align-center">
					<view class="me_tab_item flex flex-direction align-center justify-center" @click="toPage(item.url)"
						v-for="item in tabList">
						<view class="tab_item_text" style="color: red;margin-bottom: 16rpx;font-size: 16px;">
							{{item.num}}
						</view>
						<view class="tab_item_text">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding:0 32rpx;">
			<uni-section class="mb-10" title="上架列表" subTitle="左滑编辑/下架" type="line" titleFontSize='16px'></uni-section>
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 4"
					:key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
					:data-target="'move-box-' + index">
					<view class="cu-avatar  lg"
						:style="[{backgroundImage:'url(https://img1.baidu.com/it/u=3334840423,2903795201&fm=253&fmt=auto&app=120&f=JPEG?w=810&h=500)'}]">
					</view>
					<view class="content">
						<view class="text-black">商品名称{{item}}</view>
						<view class="text-blue ">
							已售：{{(item+1) * 2}}
						</view>
					</view>
					<view class="action">
						<view class="text-red ">￥ 12</view>
						<!-- <view class="cu-tag round bg-grey sm">5</view> -->
					</view>
					<view class="move">
						<view class="bg-grey">下架</view>
						<view class="bg-orange">编辑</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar  shop foot justify-end">

			<button class="action" open-type="contact" style="width: 20%;">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				客服
			</button>

			<view class="submit" @click="toPage('/pages/mePages/seller/goodsForm')"
				style="background-color: orangered;color: #fff;">去上架
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	export default {
		components: {
			headerSlot,
		},
		data() {
			return {
				sellerName: '六叔螺蛳粉',
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				tabList: [
					// {
					// 	title: '已上架',
					// 	url: '/pages/mePages/balanceDetails',
					// 	num: '4',
					// },
					{
						title: '当前订单',
						url: '/pages/mePages/personalCircle',
						num: '6',
					}, {
						title: '今日营业额',
						url: '/pages/mePages/balanceDetails',
						num: '123.67',
					},

					{
						title: '总营业额',
						url: '/pages/mePages/balanceDetails',
						num: '4023',
					},

				],

			};
		},
		methods: {
			// ListTouch触摸开始，获取触摸点距盒子左侧的距离
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向，
			ListTouchMove(e) {
				if (this.listTouchStart - e.touches[0].pageX > 50) {
					this.listTouchDirection = 'left'
				}
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				console.log(333);
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			closePage() {
				uni.navigateBack()
			},
			toPage(route) {
				if (route) {
					this.$router.smartNavigate({
						url: route
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.me_tab {
		padding: 24rpx 32rpx;
	}


	.tab_item_text {
		font-weight: 700;
		font-size: 14px;
		line-height: 40rpx;
		text-align: center;
	}
</style>